<template>
  <div>
    <el-container>
      <el-header>
        <!-- 面包屑 -->
        <div style="border: 2px">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页&nbsp;</el-breadcrumb-item>
            <el-breadcrumb-item>管理首页</el-breadcrumb-item>
          </el-breadcrumb>
          <h3>管理首页</h3>
        </div>

      </el-header>
      <el-container>

        <el-main>

          <!-- 栅格布局 -->
          <el-row>
            <el-col :span="24">
              <div style="algin:center"
                   class="grid-content bg-purple-dark"><br />
                <h5>快捷操作</h5>
              </div>
            </el-col>
          </el-row>

          <el-divider></el-divider>
          <br />
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<router-link to="/system/index/addQuestion">
                  <el-button id="but1"
                             round>新增题目</el-button>
                </router-link>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<router-link to="/system/index/addPaper">
                  <el-button id="but2"
                             type="warning"
                             round>新增试卷</el-button>
                </router-link>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<router-link to="/system/index/addTest">
                  <el-button id="but3"
                             round>新增考试</el-button>
                </router-link>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<router-link to="/system/index/addQuestionInventory">
                  <el-button id="but4"
                             type="warning"
                             round>新增题库</el-button>
                </router-link>
              </div>
            </el-col>
          </el-row>
          <br />
          <div style="background:white">
            <br />
            <router-view></router-view>
          </div>

          <!-- <el-footer>
                <div id="div1"></div>
                <el-button round>圆角按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button round>圆角按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
      
            </el-footer> -->
                <br/><br/>
                <el-divider><i class="el-icon-document-add">&nbsp;&nbsp;近期新增题库</i></el-divider>
                <template>
                    <!-- 题库列表表单 -->
                    <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column label="编号" prop="id" width="120">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column label="科目" prop="subject" width="120">
                            <template slot-scope="scope">{{ scope.row.subject }}</template>
                        </el-table-column>
                        <el-table-column label="创建者" prop="user" width="120">
                            <template slot-scope="scope">{{
                            scope.row.user.username
                            }}</template>
                        </el-table-column>
                        <el-table-column
                            prop="addTime"
                            label="创建时间"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">{{
                            scope.row.addTime | dateFormat
                            }}</template>
                        </el-table-column>
                        <el-table-column
                            prop="updateTime"
                            label="更新时间"
                            show-overflow-tooltip
                        >
                            <template slot-scope="scope">{{
                            scope.row.updateTime | dateFormat
                            }}</template>
                        </el-table-column>
                        
                    </el-table>
            </template> -->

        </el-main>
        <el-aside width="200px"
                  style="border:2px;">

        </el-aside>
      </el-container>
      <el-container>
        <el-main>

        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
//导入接口
import {
  questionInventoryList,
  updateOne,
  deleteOne,
  addOne,
  iList,
  findById
} from "../../api/questionInventoryMG";

export default {
  // 模块名字
  name: 'sonIndex',
  //数据
  data() {
    return {
      //展示框表格数据
      tableData: [],
    }
  },
  //方法
  methods: {
    //展示框表格方法
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  //初初始化
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>
// scoped 样式只在本组件使用
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  height: 80px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.list-search {
  margin-top: 20px;
}
#div1 {
  color: white;
}
/* #btn1  #btn2 #btn3 #btn4 {
    position: center;
    margin: auto;
} */
.el-col {
  margin: auto;
  position: center;
}
</style>
